<template>
  <div class="app-container">
    <el-button   class="filter-item marginRB10" type="primary" icon="el-icon-plus" @click="handleCreate()">添加</el-button>
<!--    <el-button class="marginRB10" type="danger" @click="allDel()" plain>批量删除</el-button>-->

    <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border>
      <el-table-column prop="id" label="id" > </el-table-column>
      <el-table-column prop="user_id" label="用户id" > </el-table-column>
      <el-table-column prop="add_time" label="添加时间" > </el-table-column>
      <el-table-column prop="user_code" label="用户编号" > </el-table-column>
      <el-table-column prop="nickname" label="昵称" > </el-table-column>
      <el-table-column prop="head_picture" label="头像" >
        <template slot-scope="scope">
          <el-popover placement="right" width="400" trigger="hover">
            <img :src="scope.row.head_picture" alt="" style="max-width: 400px;max-height: 400px">
            <img slot="reference" :src="scope.row.head_picture" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column min-width="180" label="操作">
        <template slot-scope="scope">
<!--          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" plain>编辑</el-button>-->
          <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.perPage" @pagination="getList"/>

    <el-dialog v-dialogDrag :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="handleDialogClose">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="120px" style="width: 400px; margin: 0 auto;">
        <el-form-item label="用户编号" prop="user_code">
          <el-input type="textarea" :autosize="{ minRows: 2}" placeholder="请输入用户编号" v-model="form.user_code"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { saveData, deleteData, listData } from '@/api/config/userWhiteList'
  export default {
    data() {
      return {
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        menuList: [],
        dialogFormVisible: false,
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        form: {
          id: undefined,
          user_code: undefined,
        },
        rules: {
          user_code: [{ required: true, message: '请输入', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        listData(this.listQuery).then(response => {
          this.menuList = response.data.list
          this.total = response.data.meta.total;
          this.listLoading = false
        })
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.form = []
        this.form.id= row.id
        this.form.user_code= row.user_code

        this.dialogStatus = 'update'
        this.dialogFormVisible = true

        this.form = Object.assign({}, this.form)
      },
      handleDelete(row) {
        let data = {user_id:row.user_id}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            // this.submitOk('删除成功')
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          } else {
            // this.submitFail('删除失败')
            this.$message({
                        message: response.message,
                        type: 'error'
                    });
          }
        })
      },
      allDel(){

        let delNum = []
        this.$refs.dataList.selection.forEach((k) => { delNum.push(k.user_id) })
        if(delNum.length === 0){return;}
        let data = {user_id:delNum.toString()}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            // this.submitOk('删除成功')
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          } else {
            // this.submitFail('删除失败')
            this.$message({
                        message: response.message,
                        type: 'error'
                    });
          }
        })
      },
      submitForm() {
        this.$refs['dataForm'].validate(valid => {
          if (valid && this.dialogStatus === 'create') {
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            saveData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                // this.submitOk(response.message)
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                // this.submitFail(response.message)
                this.$message({
                        message: response.message,
                        type: 'error'
                    });
              }
            })
          }else if(valid && this.dialogStatus === 'update'){
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            updateData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                // this.submitOk(response.message)
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                // this.submitFail(response.message)
                this.$message({
                        message: response.message,
                        type: 'error'
                    });
              }
            })
          }
        })
      },
      resetForm() {
        this.form = {
          id: undefined,
          user_code: undefined,
        }
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      }
    }
  }
</script>
